<template>
	<view class="content">
		<view class="bg-green"></view>
		<view class="x-c title">我的</view>
		<view class="card-panel">
			<view class="x-bc">
				<view class="user-avatar x-start">
					<image v-if="userInfo.avatar" class="raduis-img" :src="userInfo.avatar"></image>
					<image v-else class="raduis-img" src="/static/images/index/default-avatar.png"></image>
					<view class="user-info y-start">
						<view class="user-name x-sc">
							<view>{{userInfo.nickname}}</view>
							<view class="user-role x-sc">
								<image style="width: 29rpx; height: 29rpx; margin-right: 5rpx; "
									src="../../static/images/personal/vip.png"></image>
								<view>{{userInfo.level_name}}</view>
							</view>
						</view>
						<view class="tag-wrapper x-sc">
							<view class="tag">
								ID:{{userInfo.uid}}
							</view>
							<view @click="copyClip" class="tag x-sc">
								<view>邀请码:{{userInfo.yz_member.invite_code}}</view>
								<image style="width: 21rpx; height: 21rpx;" src="../../static/images/personal/copy.png">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="user-arrow">
					<image style="width: 14rpx; height: 25rpx;" src="../../static/images/personal/more-1.png"
						@click="junit('/pages/prefile/fix-data/fix-data' , {type: 0})">
					</image>
				</view>
			</view>
			<view class="user-data x-ac">
				<view class="y-cc">
					<navigator class="y-cc" url="/pages/prefile/my-balance/my-balance" hover-class="navigator-hover">
						<view>{{userInfo.credit.data}}</view>
						<view class="data-tag">余额</view>
					</navigator>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="/pages/prefile/my-diamond/my-diamond" hover-class="navigator-hover">
						<view>{{userInfo.love_show.usable_data}}</view>
						<view class="data-tag">红包</view>
					</navigator>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="/pages/prefile/my-allowance/my-allowance"
						hover-class="navigator-hover">
						<view>{{userInfo.integral_show.data}}</view>
						<view class="data-tag">津贴</view>
					</navigator>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="/pages/prefile/my-vouchers/my-vouchers" hover-class="navigator-hover">
						<view>{{userInfo.team_count}}</view>
						<view class="data-tag">拼团券</view>
					</navigator>
				</view>
			</view>
		</view>
		
		<view class="balance-row x-bc">
			<view class="balance-box" @click="goBalance">
				<view class="desc-font">直推拼团奖</view>
				<view class="x-bc" style="margin: 22rpx 22rpx 0 22rpx;">
					<view class="money-font">{{userInfo.sum_team}}</view>
					<view class="view-detail-btn">查看</view>
				</view>
			</view>
			
			<view class="diamong-box" @click="goDiamond">
				<view class="desc-font">直推vip奖</view>
				<view class="x-bc" style="margin: 22rpx 22rpx 0 22rpx;">
					<view class="money-font">{{userInfo.sum_vip}}</view>
					<view class="view-detail-btn">查看</view>
				</view>
			</view>
		</view>

		<view class="card-panel">
			<view class="x-bc">
				<view class="group-title">
					我的订单
				</view>
				<view class="x-sc" @click="toOrderPage(0)">
					<view class="more-text">查看全部</view>
					<image style="width: 14rpx; height: 25rpx;" src="../../static/images/personal/more-1.png"></image>
				</view>
			</view>
			<view class="user-data x-ac">
				<view class="y-cc" v-for="item in orderList" :key="item.tabIdx">
					<view class="my-order" @click="toOrderPage(item.tabIdx)">
						<image class="icon-pic" :src="item.icon"></image>
						<view class="num" v-if="item.tabIdx != 4 && userOrders['order'][item.tabIdx - 1].total != 0">
							{{userOrders['order'][item.tabIdx - 1].total}}</view>
					</view>
					<view class="data-tag">{{item.type}}</view>
				</view>
			</view>
		</view>

		<view class="card-panel">
			<view class="x-bc">
				<view class="group-title">
					我的拼团
				</view>
				<view class="x-sc">
					<view class="more-text" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 0})">查看全部
					</view>
					<image style="width: 14rpx; height: 25rpx;" src="../../static/images/personal/more-1.png"></image>
				</view>
			</view>
			<view class="user-data x-ac">
				<view class="y-cc" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 1})">
					<view class="my-pt">
						<image class="icon-pic" src="../../static/images/personal/wroth_collage.png"></image>
						<view class="num" v-if="orderStaus.status_1">{{orderStaus.status_1}}</view>
					</view>
					<view class="data-tag">拼团中</view>
				</view>

				<view class="y-cc" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 4})">
					<view class="my-pt">
						<image class="icon-pic" src="../../static/images/personal/finish.png"></image>
						<view class="num" v-if="orderStaus.status_2">{{orderStaus.status_2}}</view>
					</view>
					<view class="data-tag">已拼中</view>
				</view>

				<view class="y-cc" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 2})">
					<view class="my-pt">
						<image class="icon-pic" src="../../static/images/personal/refund.png"></image>
						<view class="num" v-if="orderStaus.status_3">{{orderStaus.status_3}}</view>
					</view>
					<view class="data-tag">已结束</view>
				</view>

				<view class="y-cc" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 3})">
					<view class="my-pt">
						<image class="icon-pic" src="../../static/images/personal/collage_fail.png"></image>
						<view class="num" v-if="orderStaus.status_4">{{orderStaus.status_4}}</view>
					</view>
					<view class="data-tag">拼团失败</view>
				</view>
			</view>
		</view>

		<view class="card-panel">
			<view class="sp user-data x-sc">
				<view class="y-cc">
					<navigator class="y-cc" url="pages/prefile/my-prize/my-prize">
						<view>
							<image class="icon-pic" src="../../static/images/personal/gift.png"></image>
						</view>
						<view class="data-tag">我的奖品</view>
					</navigator>
				</view>

				<view @click="showPic" class="y-cc">
					<view>
						<image class="icon-pic" src="../../static/images/personal/qrcode.png"></image>
					</view>
					<view class="data-tag">推广海报</view>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="pages/prefile/my-extension/my-extension">
						<view>
							<image class="icon-pic" src="../../static/images/personal/notifytion.png"></image>
						</view>
						<view class="data-tag">推广中心</view>
					</navigator>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="pages/prefile/my-extension/my-team/my-team">
						<view>
							<image class="icon-pic" src="../../static/images/personal/team.png"></image>
						</view>
						<view class="data-tag">我的团队</view>
					</navigator>
				</view>


				<view class="y-cc">
					<navigator class="y-cc" url="pages/prefile/address/list">
						<view>
							<image class="icon-pic" src="../../static/images/personal/address.png"></image>
						</view>
						<view class="data-tag">地址管理</view>
					</navigator>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="pages/prefile/bank-list/bank-list">
						<view>
							<image class="icon-pic" src="../../static/images/personal/settings.png"></image>
						</view>
						<view class="data-tag">设置</view>
					</navigator>
				</view>

				<view class="y-cc">
					<navigator class="y-cc" url="pages/prefile/service/service">
						<view>
							<image class="icon-pic" src="../../static/images/prefile/kefu.png"></image>
						</view>
						<view class="data-tag">客服</view>
					</navigator>
				</view>

				<view @click="logout" class="y-cc">
					<view>
						<image class="icon-pic" src="../../static/images/personal/logout.png"></image>
					</view>
					<view class="data-tag">退出登录</view>
				</view>
			</view>
		</view>
		<text class="bottom-title">- 轻奢行 -</text>
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				picInfo: {},
				orderStaus: {},
				orderList: [{
						tabIdx: 1,
						type: '待付款',
						icon: '../../static/images/personal/wait_pay.png'
					},
					{
						tabIdx: 2,
						type: '待发货',
						icon: '../../static/images/personal/wait_send.png'
					},
					{
						tabIdx: 3,
						type: '待收货',
						icon: '../../static/images/personal/wait_received.png'
					},
					{
						tabIdx: 4,
						type: '已完成',
						icon: '../../static/images/personal/services.png'
					},
				]
			};
		},
		computed: {
			...mapState(['userInfo', 'userOrders'])
		},
		onLoad() {


		},
		onShow() {
			this.getPingtuanTongji();
			this.getUserPrefile();
			this.getTuiGuang();
		},
		methods: {
			
			...mapMutations(['emptyUserInfo']),
			...mapActions(['getUserPrefile']),
			goBalance () {
				uni.navigateTo({
					url: '/pages/prefile/my-extents-group/my-extents-group'
				})
			},
			goDiamond () {
				uni.navigateTo({
					url: '/pages/prefile/my-extents-vip/my-extents-vip'
				})
			},
			showPic() {
				uni.previewImage({
					urls: [this.picInfo.image_url],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							if (data.tapIndex == 0) {
								uni.saveImageToPhotosAlbum({
									filePath: this.picInfo.image_url,
									success: function() {
										uni.showToast({
											title: '已保存到系统相册',
											icon: 'success'
										})
									}
								});
							}
							//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			copyClip() {
				this.setClipboardText(this.userInfo.yz_member.invite_code)

			},
			setClipboardText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '邀请码已复制',
							icon: "success"
						})
					}
				});
			},
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '您确定要登出吗？',
					success: (res) => {
						if (res.confirm) {
							this.emptyUserInfo();
							uni.navigateTo({
								url: '/pages/personal/login/login'
							})
						} else if (res.cancel) {}
					}
				});
			},
			getTuiGuang() {
				this.$api.get('/addons/yun_shop/api.php?route=member.qrcode.get-poster', {
					mid: this.userInfo.uid
				}).then(res => {
					this.picInfo = res.data;
				})
			},
			junit(url, query = {}) {
				// uni.navigateTo({
				// 	url: url
				// })
				this.$Router.push({
					path: url,
					query: query
				})
			},
			// 拼团统计
			getPingtuanTongji() {
				this.$api.post('/addons/yun_shop/api.php?route=member.member.fightTotal').then(res => {
					console.log(res, '统计123123213');
					this.orderStaus = res.data;
					console.log(this.orderStaus, this.orderStaus.status_1, 123213123123123);
				})
			},
			// 我的订单
			toOrderPage(tabIdx) {
				uni.navigateTo({
					url: '/pages/prefile/my-order/list?tabIdx=' + tabIdx
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './prefile.scss';
</style>
